<?php
/**
 * Created by PhpStorm.
 * User: dllo
 * Date: 16/9/1
 * Time: 上午11:31
 */

?>

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        /*<!--你的好友邀请你做他的导师-->*/
        #your_friend_invitation,.youBeinvited,#thankyou,.thankyou{
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
        }
        #your_friend_invitation_ul1,#your_friend_invitation_ul2{
            width: 80%;
            text-align: center;
            list-style: none;
            color: white;
            position: absolute;
        }
        #your_friend_invitation_ul1>li,#your_friend_invitation_ul2>li{
            margin-top: 3%;
        }
        #your_friend_invitation_ul1{
            top: 10%;
            left: 10%;
        }
        #your_friend_invitation_ul2{
            top: 37%;
            left: 10%;
        }
        #your_friend_invitation_ul1>li:nth-child(1){
            font-size: 1.2em;
        }
        #your_friend_invitation_ul1>li:nth-child(2){
            font-size: 2em;
        }
        .levelUp{
            width: 80%;
            position: absolute;
            top: 55%;
            left: 10%;
        }
        .youTooShit{
            width: 80%;
            position: absolute;
            top: 62%;
            left: 10%;
        }
        /*<!--拜谢你-->*/
        #thankyou{
            display: none;
        }
        .challengeGo2{
            width: 80%;
            position: absolute;
            top: 67%;
            left: 10%;
        }
        #thankyou_word{
            width: 80%;
            color: white;
            list-style: none;
            position: absolute;
            top: 31%;
            left: 24%;
        }
        #thankyou_word li{
            font-size: 2.2em;
        }
    </style>
</head>
<body>

<!--你的好友邀请你做他的导师-->
<section id="your_friend_invitation">
    <img src="img_pageEnd/youBeinvited.png" alt="" class="youBeinvited">
    <img src="img_pageEnd/levelUp.png" alt="" class="levelUp">
    <img src="img_pageEnd/youTooShit.png" alt="" class="youTooShit">
    <ul id="your_friend_invitation_ul1">
        <li>你的好友&nbsp&nbsp<span class="yourName">xxx</span></li>
        <li>邀请你做他的导师</li>
    </ul>
    <ul id="your_friend_invitation_ul2">
        <li>闯过了&nbsp&nbsp<span style="color: #EDEA4A">300</span>&nbsp&nbsp个障碍物</li>
        <li>胜出了全国&nbsp&nbsp<span style="color: #EDEA4A">75%</span>&nbsp&nbsp的玩家</li>
    </ul>
</section>

<!--拜谢你-->
<section id="thankyou">
    <img src="img_pageEnd/thankyou.png" alt="" class="thankyou">
    <img src="img_pageEnd/challengeGo2.png" alt="" class="challengeGo2">
    <ul id="thankyou_word">
        <li><span class="yourName">魔鬼</span>&nbsp&nbsp拜谢你</li>
    </ul>
</section>

</body>
</html>